@charset 'UTF-8';
@import './common.scss';
@import '../fonts/iconfont.css';

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

.web{
	header{
		position: absolute;
		width: 100vw;
		top: 0;
		left: 0;
		background-color: #FFFFFF;
		.box{
			height: 20vw;
			width: 94.14vw;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.imgBox{
				width: 16.2vw;
				height: 16.2vw;
				overflow: hidden;
				img{
					width: 100%;
				}
			}
			.searchBox{
				form{
					display: flex;
					justify-content: space-between;
					border: 1px solid #FF9344;
					border-radius: 10vw;
					width: 30vw;
					height: 7vw;
					padding-left: 4vw;
					padding-right: 3vw;
					input{
						font-size: 3vw;
						width: 23vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 7vw;
						letter-spacing: 0vw;
						color: #777777;
						border: none;
					}
					label{
						i{
							font-size: 4.5vw;
							color: #FF9344;
						}
					}
				}
			}
			.cityBox{
				position: relative;
				i{
					position: absolute;
					color: #FF9344;
					font-size: 4vw;
					right: 1.5vw;
					top: 1.8vw;
					
				}
				select{
					width: 21vw;
					height: 7vw;
					border: 1px solid #FF9344;
					padding-left: 2vw;
					appearance:none; /*去掉下拉箭头*/
					option{
						font-size: 3vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #000000;
					}
				    }
				}
		}
		
	}
	
	main{
		position: absolute;
		width: 100vw;
		top: 20vw;
		bottom: 18vw;
		
		// 超出部分滚动条
		overflow: auto;
		.bg{
			width: 100vw;
			.swiper{
				--swiper-theme-color: #FF9344;
				.swiper-wrapper{
					.swiper-slide{
						width: 100vw;
						height: 38vw;
						overflow: hidden;
						img{
							width: 100%;
						}
					}
				}
				.swiper-pagination{
					bottom: 15vw;
				}
			}
		}
		
		.disc{
			position: relative;
			padding: 14vw 12vw 0vw 10vw;
			.title{
				position: absolute;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 24vw;
				height: 7vw;
				top: 4vw;
				left: 3vw;
				i{
					font-size: 7vw;
					color: #FF9344;
				}
				h2{
					font-size: 4vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 6vw;
					letter-spacing: 0vw;
					color: #000000;
				}
			}
			.more{
				position: absolute;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 10vw;
				height: 3vw;
				top: 7vw;
				right: 3vw;
				h2{
					font-size: 3vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 7vw;
					letter-spacing: 0vw;
					color: #000000;
				}
				i{
					font-size: 3vw;
					color: #FF9344;
				}
				
			}
			.item{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.imgBox{
					width: 32vw;
					height: 13vw;
					margin-bottom: 4vw;
					img{
						width: 100%;
					}
				}
			}
		}
		
		.shop{
			position: relative;
			.title{
				position: absolute;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 24vw;
				height: 7vw;
				top: -11vw;
				left: 3vw;
				i{
					font-size: 7vw;
					color: #FF9344;
				}
				h2{
					font-size: 4vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 6vw;
					letter-spacing: 0vw;
					color: #000000;
				}
			}
			.more{
				position: absolute;
				display: flex;
				justify-content: space-between;
				align-items: center;
				top: -11vw;
				right: 3vw;
				h2{
					font-size: 3vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 7vw;
					letter-spacing: 0vw;
					color: #000000;
				}
				i{
					font-size: 3vw;
					color: #FF9344;
				}
			}
			.items{
				width: 95vw;
				margin-top: 9vw;
				margin-left: 3vw;
				.shopBox{
					width: 95vw;
					height: 22vw;
					margin-bottom: 2vw;
					position: relative;
					.left{
						display: inline-block;
						width: 28vw;
						height: 22vw;
						img{
							width: 100%;
						}
					}
					.center{
						display: inline-block;
						height: 15vw;
						margin-left: 2.8vw;
						transform: translateY(-15%);
						h2{
							font-size: 4vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 7vw;
							letter-spacing: 0vw;
							color: #000000;
						}
						h3{
							font-size: 3vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 7vw;
							letter-spacing: 0vw;
							color: #494949;
						}
						p{
							font-size: 4vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 5vw;
							letter-spacing: 0vw;
							color: #ff9344;
						}
					}
					.right{
						position: absolute;
						text-align: right;
						top: 3vw;
						right: 1vw;
						h2{
							font-size: 3.3vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 5vw;
							letter-spacing: 0vw;
							color: #494949;
							margin-bottom: 7.8vw;
						}
						h3{
							font-size: 3vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 5vw;
							letter-spacing: 0vw;
							color: #494949;
						}
					}
				}
			}
		}
		
	}
}

@media screen and (min-width:768px) and (max-width:1024px) {
	.web{
		header{
			.box{
				.cityBox{
					select{
						font-size: 3vw;
					}
				}
			}
		}
	}
	
}